<template>
	<view class="content">
		<uni-collapse accordion="true">
		    <uni-collapse-item title="增加等级考试" thumb="../../static/zengjia.png">
				<view class="title">设置考试等级(1-2级自动对应题库1，以此类推)：
					<input type="text" value="" placeholder="请输入等级 例如:1" @input="examleave"/>
				</view>
				<view class="title">设置考试费用(单位:元，最多精确到分)：
					<input type="text" value="" placeholder="请输入考试费用 例如:10" @input="exampay"/>
				</view>
				
				<view class="title">设置考试期数：
					<input type="text" value="" placeholder="请输入考试期数 例如: 第一期" @input="examscheduling"/>
				</view>
				<view class="title">设置考试名称：
					<input type="text" value="" placeholder="请输入考试名称" @input="examtitle"/>
				</view>
				<timeSelector showType="dateToTime" @btnConfirm="btnConfirm2" @btnCancel="btnCancel2" beginDate="2010-01-01" endDate="2030-12-31" beginTime="00:00:00" endTime="23:59:59">
					<view style="padding-left: 10px;" class="box-title">设置等级考试报名截止时间：</view>
					<view style="padding-left: 20px;color: red;font-size: 16px;" class="box-time">{{ dateList }}</view>
				</timeSelector>
				<timeSelector showType="dateToTime" @btnConfirm="btnConfirm1" @btnCancel="btnCancel1" beginDate="2010-01-01" endDate="2030-12-31" beginTime="00:00:00" endTime="23:59:59">
					<view style="padding-left: 10px;" class="box-title">设置等级考试开始时间：</view>
					<view style="padding-left: 20px;color: red;font-size: 16px;" class="box-time">{{ time }}</view>
				</timeSelector>
				
				<timeSelector showType="dateToTime" @btnConfirm="btnConfirm3" @btnCancel="btnCancel3" beginDate="2010-01-01" endDate="2030-12-31" beginTime="00:00:00" endTime="23:59:59">
					<view style="padding-left: 10px;" class="box-title">设置等级考试结束时间：</view>
					<view style="padding-left: 20px;color: red;font-size: 16px;" class="box-time">{{ tishi }}</view>
				</timeSelector>
				
				<button @click="plus">增加</button>
		    </uni-collapse-item>
		</uni-collapse>
	</view>
</template>

<script>
	import timeSelector from '../wing-time-selector/wing-time-selector.vue';
	import uniCollapse from '../../components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '../../components/uni-collapse-item/uni-collapse-item.vue'
	import uniSection from '../../components/uni-section/uni-section.vue'
	export default{
		data() {
		    return {
		       time: '点击选择考试开始时间',
			   dateList:'点击选择报名截止时间',
			   tishi: '点击选择考试结束时间',
			   dataList:{
				   examleaveList:'',
				   exampayList:'',
				   examschedulingList:'',
				   examtitleList:'',
				   time1:'',
				   dateList2:'',
				   endTime: ''
			   }
		    }
		},
		methods: {
			//设置考试开始时间
			btnConfirm1(e) {
				// console.log('确定时间为：', e.key);
				// this.time = e.value;
				this.time =  e.key;
				var thisTime =  e.key;
				thisTime = thisTime.replace(/-/g, '/');
				this.dataList.time1 = new Date(thisTime);
				this.dataList.time1 = this.dataList.time1.getTime();
				if(this.dataList.dateList2>this.dataList.time1){
					uni.showToast({
						title: '请检查一下考试时间的设置：报名截止时间应该小于考试开始时间',
						icon:'none'
					});
				}
			},
			btnCancel1() {
				console.log('取消时间：');
			},
			//设置报名截止时间
			btnConfirm2(e) {
				// console.log('确定时间为：', e.key);
				// this.time = e.value;
				this.dateList =  e.key;
				var thisTime =  e.key;
				thisTime = thisTime.replace(/-/g, '/');
				this.dataList.dateList2 = new Date(thisTime);
				this.dataList.dateList2 = this.dataList.dateList2.getTime();
			},
			btnCancel2() {
				console.log('取消时间：');
			},
			//设置报名结束时间
			btnConfirm3(e) {
				// console.log('确定时间为：', e.key);
				// this.time = e.value;
				this.tishi =  e.key;
				var thisTime =  e.key;
				thisTime = thisTime.replace(/-/g, '/');
				this.dataList.endTime = new Date(thisTime);
				this.dataList.endTime = this.dataList.endTime.getTime();
				console.log(this.dataList.endTime)
			},
			btnCancel3() {
				console.log('取消时间：');
			},
			examleave: function(e){
				console.log(e.detail.value)
				this.dataList.examleaveList = e.detail.value
			},
			exampay: function(e){
				console.log(e.detail.value)
				this.dataList.exampayList = e.detail.value
			},
			examscheduling: function(e){
				console.log(e.detail.value)
				this.dataList.examschedulingList = e.detail.value
			},
			examtitle: function(e){
				console.log(e.detail.value)
				this.dataList.examtitleList = e.detail.value
			},
			plus(){
				this.$emit('func',JSON.stringify(this.dataList))
			}
		},
		components:{uniCollapse,uniCollapseItem,uniSection,timeSelector}
	}
</script>

<style lang="scss" scoped>
	view{
		width: 100%;
		font-size: 14px;
		text-align: left;
		background-color: #fff;
		// border-bottom: 2px solid #DDDDDD;
		line-height: 40px;
		button{
			width: 50%;
			font-size: 12px;
			background-color: #CCE6FF;
			margin: 10px auto;
		}
		input{
			width: 50%;
			border: 2px solid #CCE6FF;
			font-size: 12px;
			margin: 5px auto;
			text-align: center;
			height: 35px;
			
		}
		.title{
			padding-left: 10px;
		}
	}
</style>
